<!-- eslint-disable vue/no-mutating-props -->
<template>
   <Modal
      v-model:visible="props.showRate"
      :title="props.infoObject?.title"
      :zIndex="999"
      centered
      width="20%"
      :mask="false"
      >
        <template #closeIcon>
          <IconClose @click="handleClose"/>
        </template>
      <div class="row">
          <InputNumber 
            v-model:value="formRoute" 
            style="flex: 3;" 
            v-if="props.infoObject?.formtype === 'route'"
          />
          <template v-if="outline && props.infoObject?.formtype == 'jamb'">
                  <!-- <InputNumber 
                    :value="outline.width" 
                    @change="value => updateOutline({ width: value as number })" 
                    style="flex: 3;" 
                  /> -->
                  <InputNumber 
                    :value="outlinewidth" 
                    @change="value => changeborder(value as number)" 
                    style="flex: 3;" 
                  />
         </template>
      </div>
      <template #footer>
        <Button  size="small"  @click="handleClose">取消</Button>
        <Button  size="small" class="btn-confirm"  @click="handleConfirm">确定</Button>
      </template>
    </Modal>
</template>

<script lang="ts" setup>
import { ref, toRefs, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTElementOutline } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import { any } from 'vue-types'
const props = defineProps({
  showRate: {
    type: Boolean,
    default: false,
    required: true
  },
  infoObject: {
    type: Object,
    title: {
      default: ''  
    },
    itemLabel: {
      default: ''    
    },
    formtype: { // -route/jamb  角度/边框粗细
      default: ''  
    }
  }
})
const { infoObject } = toRefs(props)
const slidesStore = useSlidesStore()
const { handleElement } = storeToRefs(useMainStore())
const outline = ref<PPTElementOutline>()
const outlinewidth = ref()
const hasOutline = ref(true)
const formRoute = ref(0)
watch(handleElement, () => {
  if (!handleElement.value) {
    return 
  }
  outline.value = 'outline' in handleElement.value ? handleElement.value.outline : undefined
  const border = JSON.parse(JSON.stringify(outline))
  if (border._value) {
    outlinewidth.value = border._value.width
  }
}, { deep: true, immediate: true })
const { addHistorySnapshot } = useHistorySnapshot()
const emit = defineEmits<{
  (event: 'change', payload: FileList): void
  (event: 'close'): void
  (event: 'Comfirm', value: number): void
}>()

const updateOutline = (outlineProps: Partial<PPTElementOutline>) => {
  if (!handleElement.value) return
  const props = { outline: { ...outline.value, ...outlineProps } }
  slidesStore.updateElement({ id: handleElement.value.id, props })
  addHistorySnapshot()
}
const changeborder = (value:number) => {
  outlinewidth.value = value
}
const handleConfirm = () => {
  if (props.infoObject.formtype === 'jamb') {
    if (!handleElement.value) return
    updateOutline({ width: outlinewidth.value })
    emit('close')
  }
  else {
    emit('Comfirm', formRoute.value)
  }
 
}
const handleClose = () => {
  if (props.infoObject.formtype === 'jamb') {
    const border = JSON.parse(JSON.stringify(outline))
    if (!border._value.width) {
      updateOutline({ width: 0 })
    }
  }
  emit('close')
}
</script>

<style lang="scss" scoped>
.input {
  display: none;
}
.btn-confirm {
  color: white;
  background: #3d7eff !important;
}
.btn-confirm:hover {
  border: none !important;
}
.row {
  width: 100%;
  display: flex;
}
</style>